<template>

    <div>

        <h2>当前count::{{sum}}</h2>
        <h2>xx::{{name}}</h2>
        <h2>当前bigNum::{{bigNum}}</h2>


        <h3 style="color:green;">下方组件的总人数：{{personList.length}}</h3>
        <select v-model="n">
            <option :value="1">1</option>
            <option :value="2">2</option>
            <option :value="3">3</option>
        </select>
        <button @click="increment(n)">+</button>
        <button @click="decrement(n)">-</button>
        <button @click="incrementOdd">奇数+</button>
        <button @click="incrementWait">等待+</button>
    </div>
</template>

<script>
    import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
    export default {
        name: "Count",
        data(){
            return {
                n:1,

            }
        },
        computed:{
           //...mapState({sum:'sum',name:'name'})
           //...mapState(['sum','name','personList']),
           // ...mapGetters(['bigNum'])
            ...mapState('count',['sum','name']),
            ...mapState('person',['personList']),
            ...mapGetters('count',['bigNum']),
        },
        methods:{
            // increment(){
            //     //this.$store.dispatch("add",this.n)
            //     this.$store.commit("ADD",this.n)
            // },
            //...mapMutations({increment:'ADD'}),
            ...mapMutations('count',{increment:'ADD'}),
            // decrement(){
            //
            //     this.$store.dispatch("count/sub",this.n)
            // },
            //...mapActions({decrement:'sub'}),
            ...mapActions('count',{decrement:'sub'}),

            incrementOdd(){

            },
            incrementWait(){
                setTimeout(()=>{

                },1000)
            },


        },
        mounted() {
            console.log(this)
        }
    }
</script>

<style scoped>


</style>